<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <title>漂亮按钮</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link href="../style/ui-base.css" rel="stylesheet">
    <link href="../style/style.css" rel="stylesheet">
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="../js/flexible.js"></script>
</head>
<style>
    html, body {
        height: 100vh;
        font-family: "Microsoft YaHei", "微软雅黑", Helvetica Neue, Helvetica, Arial, sans-serif;;
    }
</style>
<body>
<h1>点击切换的漂亮按钮</h1>
<a class="toggle toggle-off" href="#"></a>
<p>原理：借助jquery的toggleClass在两种状态之间切换。</p>
</body>
<script>
    $(function () {
        $('.toggle').click(function (e) {
            var toggle = this;
            e.preventDefault();
            $(toggle).toggleClass('toggle-on').toggleClass('.toggle-off');
        });
    });
</script>
</html>